<template>
  <view class="container">
    <view class="top">
      <!-- 维修方式 -->
      <uni-card margin="15rpx">
        <view class="success-content">
          <view class="success-icon">
            <image src="/static/autoRepair/success-check.png" mode="aspectFit" class="check-img" />
          </view>
          <view class="success-title">预约成功</view>
          <view class="success-order">预约编号：<text class="order-number">{{ orderNumber }}</text></view>
          <button class="btn-primary" @click="goHome">返回首页</button>
          <button class="btn-disabled" @click="goDetails">预约详情</button>
        </view>
      </uni-card>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const orderNumber = ref('')
const date = ref('') // 定义响应式变量 date

onMounted(() => {
  // 生成16位随机数字编号
  let num = ''
  for (let i = 0; i < 16; i++) {
    num += Math.floor(Math.random() * 10)
  }
  orderNumber.value = num
  // 生成一个当前时间并存储到响应式变量中
  date.value = new Date().toISOString() 
})

const goHome = () => {
  uni.switchTab({ url: '/pages/index/index' })
}

const goDetails = () => {
  uni.navigateTo({
    url: `/pages/repair/repair?date=${encodeURIComponent(date.value)}`
  })
}
</script>

<style scoped>
.container {
	background: #fff;
	min-height: 100vh;
	padding-bottom: 80rpx;
}


.top {
	margin-top: -15rpx;
	padding-top: 20rpx;
	height: 300rpx;
	background-color: #3083fb;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx 0 20rpx 0;
}
.success-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}
.check-img {
  width: 100%;
  height: 100%;
}
.success-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 80rpx;
  color: #222;
}
.success-order {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 60rpx;
}
.order-number {
  font-weight: bold;
  letter-spacing: 2rpx;
}
.btn-primary {
  width: 80%;
  background: #1677ff;
  color: #fff;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-bottom: 24rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
.btn-disabled {
  width: 80%;
  background: #e0e0e0;
  color: #aaa;
  border-radius: 40rpx;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>
